<template>
	<view>
		<view v-if="list.length==0&&isLoading" class="ticket_no_card">
			<image src="https://aliyunoss.hntgov.net/sd/no_card_list1.png" mode="aspectFill"></image>

			<view class="ticket_item" style="margin-top:-32rpx;">
				<view class="ticket_item_left">
					<text>湖南全省和各地市旅游年卡</text>
					<text>全湖南超百家景区免费游，各地市景区免费游，各地市</text>
				</view>
				<button @click="toMall()">立即购买</button>
			</view>

			<view class="ticket_item" style="margin-top:0rpx;">
				<view class="ticket_item_left">
					<text>首次使用 | 绑定年卡</text>
					<text>点击立即绑定使用旅游年卡</text>
				</view>
				<button @click="toBind()">立即绑定</button>
			</view>

		</view>
		<view v-if="list.length!=0&&isLoading">
			<view class="ticket_one">
				<view class="ticket_tag"></view>
				<text>旅游卡信息</text>
				<button @click="toBind()" class="ticket_tag_buttom">+
					绑定新卡</button>
			</view>
			<u-swiper-other :list="list" height='330' bg-color='#fff' @change='swiperChage' :effect3d='true' mode='none'
				effect3d-previous-margin='50' imgMode='aspectFit' :current='current' :autoplay='false'></u-swiper-other>
			<view class="ticket_two">
				卡名：{{cardInfo.cardModelName||''}}</br>
				卡号：{{cardInfo.cardNo||''}}</br>
				有效期至：{{cardInfo.validityTime||''}}

				<text @click="copyCardNumber(cardInfo.cardNo)">复制</text>
			</view>
			<u-gap height="24" bg-color="#f8f8f8" v-if="isHaveInfo"></u-gap>
			<view class="ticket_one" v-if="isHaveInfo">
				<view class="ticket_tag"></view>
				<text style="margin-right: 24rpx;">学法送票</text>
			</view>
			<view class="ticket_one" v-if="isHaveInfo">
				<text style="color: #3D3D3D;">酒店、餐饮使用预约：</text>
				<text style="color: #5F94FF;position: absolute;right: 30rpx;font-weight: normal;"
					@click="toHotel(cardInfo.thirdId)">立即预约</text>
			</view>
			<u-gap height="24" bg-color="#f8f8f8"></u-gap>

			<view class="ticket_three">
				<view v-if="cardInfo.thirdId!='1'" :class="activeType==1?'active':''" @click="selectType(1)">
					适用景区
				</view>
				<view :class="activeType==2?'active':''" @click="selectType(2)">
					入园码
				</view>
				<view :class="activeType==3?'active':''" @click="selectType(3)">
					景区预约
				</view>

				<view class="ticket_three_bj" v-if="cardInfo.thirdId!='1'"
					:style="{'left':activeType==1?'0rpx':activeType==2?'258rpx':activeType==3?'516rpx':'0rpx'}">
					{{activeType==1?'适用景区':activeType==2?'入园码':activeType==3?'景区预约':''}}
				</view>

				<view class="ticket_three_bj1" v-if="cardInfo.thirdId=='1'"
					:style="{'left':activeType==2?'0rpx':activeType==3?'387rpx':'0rpx'}">
					{{activeType==1?'适用景区':activeType==2?'入园码':activeType==3?'景区预约':''}}
				</view>
			</view>
			<view style="padding-bottom: 10rpx;" v-if="activeType==1||activeType==3">
				<view class="ticket_one" style="position:relative;" v-if="activeType==3">
					<view class="ticket_tag"></view>
					<text>需预约权益</text>
					<view @click="toRecordList()"
						style="position: absolute;right: 0rpx;font-weight: 400;color: #929292;display: flex;align-items: center;">
						预约记录<u-icon size='18' name="play-right-fill"></u-icon></view>
				</view>

				<view class="ticket_one" v-if="activeType==1">
					<view class="ticket_tag"></view>
					<text style="margin-right: 24rpx;">全部权益资源</text>
					共 <text style="color: #FF000A;">{{total}}</text>家
					<!-- | 单次使用门票价值超 <text style="color: #FF000A;">{{totalValue}}</text> 元 -->
				</view>
				<view class="ticket_search" v-if="activeType==1||(activeType==3&&cardInfo.thirdId=='1')">
					<u-search placeholder="输入名称搜索" placeholder-color='#CDCDCD' v-model="keyword" :show-action='false'
						height='76' search-icon-color='#C1C1C1' @input='searchInput'></u-search>
				</view>
				<view v-if="lookList.length!=0">
					<view class="ticket_jq" v-for="(item,index) in lookList" :key="index"
						@click="toScenicDetail(item.scenicId)">
						<view style="display: flex;">
							<u-image :lazy-load="true" width='260rpx' height='214rpx' border-radius='12rpx'
								:src="item.scenicImageUrl||'https://aliyunoss.hntgov.net/sd/all_moren.png'"
								mode="aspectFill"></u-image>
							<view class="ticket_jq_info">
								<view class="ticket_info_name"
									style="color: #3D3D3D;font-size: 32rpx;font-weight: bold;">{{item.scenicName||''}}
								</view></br>
								<view
									style="width: 100%;position:relative;font-size: 24rpx;display: flex;align-items: center;">
									<view class="ticket_info_opentime" style="color: #929292;">{{item.openTime||'-'}} 开放
									</view>
									<text style="position: absolute;right: 0rpx;"
										:style="{color:item.openFlag==1?'#3278E7':'#FF9600'}">{{item.openFlag==1?'营业中':'暂停营业'}}</text>
								</view> </br>
								<text style="color: #929292;font-size: 24rpx;"
									:style="{color:cardInfo.thirdId!='1'?'#929292;':'#ffffff'}"
									v-if="">合作到期：{{item.signValidDate||'-'}}</text>
								<view style="width: 100%;position:relative;display: flex;align-items: center;">
									<text style="color: #3D3D3D;font-size: 24rpx;" v-if="item.discountType==1">
										<text v-if="item.totalTimes!=0">免票
											<text
												style="color: #FF1500;padding-left: 10rpx;padding-right: 10rpx;">{{item.totalTimes||'-'}}</text>次</text>

										<text v-if="item.totalTimes==0">
											<text style="color: #FF1500;">不限次</text></text>
									</text>


									<text style="color: #3D3D3D;font-size: 24rpx;" v-if="item.discountType==2">
										<text>折扣价:
											<text
												style="color: #FF1500;padding-left: 10rpx;padding-right: 10rpx;">{{item.discountPercentage||'-'}}%</text></text>
									</text>

									<text style="color: #3D3D3D;font-size: 24rpx;" v-if="item.discountType==3">
										<text>优惠价:
											<text
												style="color: #FF1500;padding-left: 10rpx;padding-right: 10rpx;">{{item.discountAmount||'-'}}</text>元</text>
									</text>


									<text
										style="position: absolute;right: 0rpx;color: #929292;font-size: 24rpx;">窗口价<text
											style="color: #F03F4D;">￥{{item.price||'-'}}</text></text>
								</view>
							</view>
						</view>
						<view style="color: #3278E7;font-size: 24rpx;line-height: 40rpx;margin-top: 24rpx;"
							v-if="item.cardInstruction">
							{{item.cardInstruction}}
						</view>
						<view style="border-bottom:2rpx #D0D0D0 dashed;width: 642rpx;margin-top: 24rpx;"></view>
						<view class="ticket_jq_info_b">
							<text v-if="item.appointFlag==1">需提前{{item.advanceDay||'-'}}天预约</text>
							<text v-else>不需要预约</text>
							<!-- <text style="padding-left: 48rpx;color: #14BF87;">已使用 {{item.usedTimes}} 次</text> -->
							<view style="position: absolute;right: 0rpx;" v-if="item.appointFlag==1"><u-button
									type="error" @click="toScenicDetail(item.scenicId)" :custom-style="customStyle1">
									立即预约</u-button>
							</view>

							<text style="position: absolute;right: 0rpx;" v-else>查看详情 >></text>

						</view>
						<text v-if="!(item.grade==null||item.grade=='0')"
							class="ticket_item_tag">{{item.grade}}{{cardInfo.thirdId=='1'?'A':''}}</text>
					</view>
					<u-loadmore :status="status" />
				</view>
				<view v-else style="display: flex;flex-direction: column;align-items: center;">
					<image src="https://aliyunoss.hntgov.net/h5/list_nodata.png"
						style="width: 520rpx;height: 520rpx;margin-top: -100rpx;">
					</image>
					<text style="margin-top: -100rpx;color: #999;">{{activeType==1?'暂无景区':'该旅游卡所有景区无需预约'}} </text>
				</view>
			</view>
			<view style="padding-bottom: 100rpx;" v-if="activeType==2">
				<view class="ticket_one">
					<view class="ticket_tag"></view>
					<text>入园码</text>
				</view>
				<image :src="userInfo.qrCode" class="ticket_iamge"></image>
				<view style="width: 750rpx;text-align: center;height: 80rpx;line-height: 80rpx;"
					v-if="userInfo.freshFlag"><text style="color: #3278E7;"
						v-if="seconds!=0">{{seconds}}秒后过期</text>
						<!-- <u-button @click="reGetCode()" shape="circle" type="error" v-else size='mini'>重新获取</u-button> -->
						</view>
				<view class="ticket_one">
					<view class="ticket_tag"></view>
					<text>持卡人信息</text>
				</view>
				<view class="hx_cxrxx">
					<image v-if="userInfo.img" :src="userInfo.img"></image>
					<view class="hx_wzxx">
						<text>姓名：{{userInfo.userName||''}}</text>
						<text>手机号：{{userInfo.mobile}}</text>
						<text>证件类型：{{userInfo.idType||''}}</text>
						<text>证件号：{{userInfo.idNo||''}}</text>
					</view>
				</view>
			</view>
		</view>
		
		<view style="width: 750rpx;padding: 175rpx;" v-if="!isLoading">
		<u-button @click="toAuthorization()">登录</u-button>
		</view>
	</view>
</template>
<script>
	var that = ''
	export default {
		data() {
			return {
				tips: '',
				seconds: 30,
				status: 'loadmore',
				activeType: 2,

				customStyle1: {
					width: '120rpx',
					height: '44rpx',
					fontSize: '20rpx',
					background: '#FF000F'
				},
				cardInfo: {},
				list: [],
				isLoading: false,
				userInfo: '',
				current: 0,
				userId: '',
				isHaveInfo: false,
				keyword: '',
				allResourceList: [],
				yyResourceList: [],
				lookList: [],
				totalValue: 0,
				page: 1,
				pageAll: 2,
				timer: null,
				total:0
			}
		},
		onLoad() {
			that = this
            uni.setStorageSync('isTo',1)
			if (uni.getStorageSync('phone')) {
				this.getUserCardListMethod()
			}
		},
		onShow() {
			if (!uni.getStorageSync('phone')&&uni.getStorageSync('isTo')) {
				uni.navigateTo({
					url: '/pages/index/authorization'
				})
			}
			if (uni.getStorageSync('isBind')) {
				this.current = 0
				this.getUserCardListMethod()
			}
		},
		onReachBottom() {
			if (this.activeType == 1 || this.activeType == 3) {
				this.getCardResourceMethod()
			}
		},
		onHide() {
			uni.removeStorageSync('isBind')
		},
		methods: {
			async reGetCode() {
				await this.createCardQRCodeMethod(this.cardInfo.cardNo)
				await this.startTime()
			},
			toAuthorization(){
				console.log(13232);
				if (!uni.getStorageSync('phone')) {
					console.log(123);
					uni.navigateTo({
						url: '/pages/index/authorization'
					})
				}
			},
			startTime() {
			    this.seconds = 30
				this.timer = setInterval(() => {
					--this.seconds
					if(this.seconds==0){
						this.qrAndUserInfoMethod(that.cardInfo)
						this.seconds=30
					}
				}, 1000);
			},
			createCardQRCodeMethod(e) {
				this.$u.api.createCardQRCode({
					cardNumber: e
				}).then(res => {
					if (res) {
						this.userInfo.qrCode = res.cardQrCode
					}
				})
			},
			selectType(e) {
				this.activeType = e
				this.lookList = []
				this.page = 1
				this.pageAll = 2
				switch (e) {
					case 1:
						this.getCardResourceMethod()
						break
					case 3:
						this.getCardResourceMethod()
						break
				}
			},
			searchInput() {
				this.page = 1
				this.pageAll = 2
				this.lookList = []
				this.$u.throttle(this.getCardResourceMethod, 1000)
			},
			toHotel(e) {
				let wjId = 0
				if (e == 'ff8080816242b0ac01628e4c20ed2bcb') {
					wjId = 1002
				} else if (e == 'cd0a16a02a5d40b1a2b5d3febdd675fb') {
					wjId = 1005
				}
				uni.navigateTo({
					url: '/member/fzquest/hotel?userId=' + this.userId + '&wjId=' + wjId
				})
			},
			copyCardNumber(e) {
				uni.setClipboardData({
					data: e
				})
			},
			swiperChage(e) {
				this.current = e
				that.cardInfo = that.list[e]
				that.userInfo = {}
				that.lookList = []
				that.keyword = ''
				this.activeType = 2
				this.page = 1
				this.pageAll = 2
				

				that.qrAndUserInfoMethod(that.cardInfo)


				if (this.activeType == 1 || this.activeType == 3) {
					that.getCardResourceMethod()
				}
			},
			getUserCardListMethod() {
				this.$u.api.getUserCardList({
					"mobile": uni.getStorageSync('phone'),
					"saleChannel": 'zfb'
				}).then(res => {
					that.isLoading = true
					that.list = res.data
					that.cardInfo = that.list[this.current]
					that.qrAndUserInfoMethod(that.cardInfo)
					console.log(this.activeType);
					if (this.activeType == 1 || this.activeType == 3) {
						that.getCardResourceMethod()
					}


				})
			},

			getCardResourceMethod() {
				if (that.page <= that.pageAll) {
					this.$u.api.getCardResource({
						"channel": that.cardInfo.channel,
						"thirdId": that.cardInfo.thirdId,
						"cardNum": that.cardInfo.cardNo,
						"queryType": this.activeType == 1 ? 1 : 2,
						"name": this.keyword,
						"pageSize": 10,
						"pageNum": this.page
					}).then(res => {
						that.page = that.page * 1 + 1;
						that.total=res.data.total
						that.pageAll = Math.ceil(res.data.total / 10)
						if (that.page == 2) {
							that.lookList = res.data.list
						} else {
							that.lookList = that.lookList.concat(res.data.list)
						}
						if (that.page > that.pageAll) {
							that.status = "nomore"
						}
					})
				}
			},
			qrAndUserInfoMethod(info) {
				this.$u.api.qrAndUserInfo({
					"scenicId": "",
					"channel": info.channel,
					"thirdId": info.thirdId,
					"cardNum": info.cardNo,
					"mobile": uni.getStorageSync('phone')
				}).then(res => {
					this.userInfo = res.data
					this.seconds=30
					clearInterval(this.timer);
					this.timer = null;
					if (res.data.freshFlag) {
						
						this.startTime()
					}
				})
			},
			toScenicDetail(e) {
				if (that.cardInfo.thirdId == '1') {
					uni.navigateTo({
						url: `../../member/other/scenicinfo?id=${e}&cardNum=${this.cardInfo.cardNo}&certificateNumber=${this.userInfo.idNo}&mobile=${this.userInfo.mobile}&userName=${this.userInfo.userName}`
					})
				} else {
					uni.navigateTo({
						url: `/pages/card/scenicdetail?scenicId=${e}&channel=${this.cardInfo.channel}&thirdId=${this.cardInfo.thirdId}&cardNum=${this.cardInfo.cardNo}&cardModelName=${this.cardInfo.cardModelName}&idNo=${this.userInfo.idNo}&name=${this.userInfo.userName}&mobile=${this.userInfo.mobile}`
					})
				}


			},
			toMall() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			toBind() {
				uni.navigateTo({
					url: '/pages/card/bind'
				})
			},
			toRecordList() {
				uni.navigateTo({
					url: `/pages/card/record?mobile=${this.userInfo.mobile}&cardNum=${this.cardInfo.cardNo}&channel=${this.cardInfo.channel}`
				})
			}
		}
	}
</script>
<style scoped lang="less">
	.ticket_no_card {
		background-color: #f8f8f8;
		padding-bottom: 20rpx;

		image {
			width: 750rpx;
			height: 800rpx;

		}

		.ticket_item {
			width: 702rpx;
			height: 220rpx;
			margin: 24rpx;
			display: flex;
			align-items: center;
			background-color: #fff;
			border-radius: 16rpx;
			padding-left: 27rpx;
			position: relative;

			.ticket_item_left {
				width: 444rpx;
				display: flex;
				flex-direction: column;

				text:nth-child(1) {
					color: #3D3D3D;
					font-size: 32rpx;
					font-weight: bold;
				}

				text:nth-child(2) {
					display: block;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					overflow: hidden;
					-webkit-line-clamp: 1;
					margin-top: 24rpx;
					color: #C4C6CA;
					font-size: 28rpx;
				}
			}

			button {
				background: linear-gradient(90deg, #FF000A -18%, #FCB13A 141%);
				color: #fff;
				border-radius: 40rpx;
				width: 192rpx;
				height: 80rpx;
				font-size: 22rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}

	.ticket_jq {
		display: flex;
		flex-direction: column;
		width: 702rpx;
		margin-bottom: 24rpx;
		margin-left: 24rpx;
		box-shadow: 0px 4px 10px 0px #DCDCDC;
		padding: 30rpx 30rpx 0rpx 30rpx;
		border-radius: 20rpx;
		position: relative;

		.ticket_item_tag {
			position: absolute;
			top: 30rpx;
			left: 30rpx;
			border-radius: 12rpx 0rpx 12rpx 0rpx;
			color: #fff;
			background-color: #3278E7;
			padding: 5rpx 10rpx 5rpx 10rpx;
			font-size: 20rpx;
		}

		.ticket_jq_info_b {
			width: 642rpx;
			color: #9C9C9C;
			height: 93rpx;
			display: flex;
			align-items: center;
			position: relative;
			font-size: 24rpx;
		}



		.ticket_jq_info {
			margin-left: 30rpx;
			width: 360rpx;
			line-height: 56rpx;

			.ticket_info_name {
				color: #3D3D3D;
				font-size: 32rpx;
				font-weight: bold;
				width: 360rpx;
				overflow: hidden !important;
				text-overflow: ellipsis !important;
				display: -webkit-box !important;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
			}
		}

	}

	.ticket_info_opentime {
		width: 260rpx;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
		display: -webkit-box !important;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	.ticket_search {
		width: 704rpx;
		margin: 24rpx;
	}

	.hx_cxrxx {
		display: flex;
		gap: 60rpx;
		margin-left: 24rpx;

		image {
			width: 248rpx;
			height: 248rpx;
		}

		.hx_wzxx {

			display: flex;
			flex-direction: column;
			gap: 40rpx;
			color: #3D3D3D;
			font-size: 24rpx;
			align-items: flex-start;
		}
	}

	.ticket_text {
		width: 750rpx;
		color: #929292;
		font-size: 24rpx;
		text-align: center;
	}

	.ticket_iamge {
		width: 350rpx;
		height: 350rpx;
		margin: 0rpx 200rpx 16rpx 200rpx;
	}

	.ticket_three {
		width: 750rpx;
		border-bottom: #f2f2f2 2rpx solid;
		height: 88rpx;
		display: flex;
		gap: 24rpx;
		position: sticky;
		top: 0rpx;
		background-color: #fff;
		z-index: 1000;

		view {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.ticket_three_bj {
			background: #5F94FF;
			width: 234rpx;
			height: 88rpx;
			position: absolute;
			color: #fff;
		}

		.ticket_three_bj1 {
			background: #5F94FF;
			width: 363rpx;
			height: 88rpx;
			position: absolute;
			color: #fff;
		}
	}

	.ticket_tag_buttom {
		position: absolute;
		right: 24rpx;
		width: 184rpx;
		height: 68rpx;
		background: #5F94FF;
		color: #fff;
		font-size: 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 8rpx;
	}

	.ticket_one {
		width: 706rpx;
		margin: 24rpx;
		display: flex;
		align-items: center;
		margin-bottom: 34rpx;

		.ticket_tag {
			width: 5rpx;
			height: 36rpx;
			margin-right: 12rpx;
			background: #488CFE;


		}

		text {
			color: #1A1818;
			font-size: 28rpx;
			font-weight: 600;
		}
	}

	.ticket_two {
		position: relative;
		line-height: 48rpx;
		color: #3D3D3D;
		font-size: 24rpx;
		margin: 24rpx;

		text {
			color: #2587FF;
			position: absolute;
			right: 24rpx;
			top: 48rpx;
		}
	}
</style>